<template>
  <div class="msg">
    <div class="cntTop">
      <span>消息中心</span>
      <i> | </i>
      <span class="url">&nbsp; NOTIFICATION CENTER</span>
    </div>
    <div class="card">

      <el-collapse v-for=" i in 1" :key="i" :v-model="activeNames = 'i'" @change="handleChange">
        <div v-for=" i in 5" :key="i" class="fold">
          <el-checkbox :v-model="checked" />
          <el-collapse-item title="【系统消息】 耐克公司就“Cryptokicks”一词向美国专利  2019/5/29" :name="i">
            <div class="cardTxt">
              尊敬的用户，您的粉丝量已经突破12万，现通知您可以晋升为中级评测师
              <br>
              操作原因：感谢您在评测工场发布您的原创作品。</div>
          </el-collapse-item>
        </div>

      </el-collapse>
      <div class="btn">
        <el-button size="mini">删除</el-button>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      activeNames: ['1'],
      checked: false
    }
  },
  methods: {
    handleChange(val) {
      console.log(val)
    }

  }
}
</script>

<style lang="scss" scoped>
.msg{
  >.cntTop {
    height: 60px;
    line-height: 60px;
    padding-left: 30px;
    border-bottom: 1px solid rgba(237, 237, 237, 1);
    > span {
      font-size: 18px;
      line-height: 24px;
    }
    > i {
      width: 7px;
      height: 15px;
    }
    > .url {
      width: 151px;
      height: 19px;
      font-size: 14px;
      line-height: 19px;
      color: rgba(153, 153, 153, 1);
    }
  }
  >.card {
    min-height: 548px;
    height: 100%;
    width: 100%;
    background-color: #fff;
    .el-collapse{
      border: none;
    }
    .fold{
      width: 100%;
      height: 100%;
      padding: 0 20px;
      .cardTxt{
        width: 100%;
        height:43px;
        font-size:14px;
        line-height:24px;
        color:rgba(114,116,114,1);
        margin: 20px 50px
      }
    }
  }
  .el-checkbox{
    position: relative;
    top: 15px;
  }
  .btn{
    margin: 20px 0;
    .el-button{
      background:rgba(234,234,234,1);
      border-radius:5px;
      line-height: 10px;
      margin-left: 20px;
    }
  }
}

</style>
